
<template>
    <div class="container">
      <!-- <div style="height: 10px"></div> -->
      <view class="all">
        <!-- 内容切换 -->
        <view class="content">
          <div v-show="indent == '维保'" class="card">
            <div style="height: 10px"></div>
            <div class="card-top">
              <div style=" text-align: center">{{ obj.order_sn }}</div>
              <div style=" text-align: center">{{ obj.date }}</div>
              <div :class="obj.type==1?'right':'right1'" style="width: 20%; text-align: center;border-radius: 4px;">
                {{ obj.type == 1 ? "自派单" : "手工单" }}
              </div>
            </div>
            <div style="height: 10px"></div>
            <u-line color="#83AF92"></u-line>
            <div style="height: 10px"></div>
            <div style="width: 90%;margin-left: 5%;">
                <div>派单类型:{{ obj.types }}</div>
                <div style="height: 10px"></div>
                <div>设备名称:{{ obj.name }}</div>
                <div style="height: 10px"></div>
                <div>设备编号:{{ obj.bh }}</div>
                <div style="height: 10px"></div>
                <div>所属部门:{{ obj.bm }}</div>
                <div style="height: 10px"></div>
                <div>紧急程度:{{ obj.jj }}</div>
                <div style="height: 10px"></div>
                <div>故障类型:{{ obj.gz }}</div>
                <div style="height: 10px"></div>
                <div>指定人员:{{ obj.zd }}</div>
                <div style="height: 10px"></div>
                <div>设备状态:{{ obj.status }}</div>
                <div style="height: 10px"></div>
                <div>任务描述:{{ obj.ms }}</div>
                <div style="height: 10px"></div>
            </div>
            <!-- 状态为已完成时隐藏当前 -->
            <u-line v-show="obj.state==1" color="#83AF92"></u-line>
               <div v-show="obj.state==1" style="width: 90%;margin-left: 5%;">
                <div style="height: 10px"></div>
                <div>设备状态:已修复</div>
                <div style="height: 10px"></div>
                <div>提交时间:{{ obj.date }}</div>
                <div style="height: 10px"></div>
                <div style="display: flex;justify-content: space-between;">
                    <div class="pic"></div>
                    <div class="pic"></div>
                </div>
               </div>
                <div v-show="obj.state==1" style="height: 10px"></div>
            <u-line color="#83AF92"></u-line>
            <div style="height: 10px"></div>
            <div style="margin-left: 5%;">
                任务状态:{{ obj.state==1?'未接单':'已完成' }}
            </div>
            <div style="height: 10px"></div>
          </div>
          <div v-show="indent == '巡检'" class="card">
            <div style="height: 10px"></div>
            <div class="card-top">
              <div style=" text-align: center">{{ obj.order_sn }}</div>
              <div style=" text-align: center">{{ obj.date }}</div>
            </div>
            <div style="height: 10px"></div>
            <u-line color="#83AF92"></u-line>
            <div style="height: 10px"></div>
            <div style="width: 90%;margin-left: 5%;">
                <div>派单类型:{{ obj.types }}</div>
                <div style="height: 10px"></div>
                <div>接单人:{{ obj.name }}</div>
                <div style="height: 10px"></div>
                <div>巡检对象:{{ obj.bh }}</div>
                <div style="height: 10px"></div>
                <div>巡检内容:{{ obj.bm }}</div>
                <div style="height: 10px"></div>
                <div>任务描述:{{ obj.jj }}</div>
                <div style="height: 10px"></div>
            </div>
            <!-- 状态为已完成时隐藏当前 -->
            <u-line v-show="obj.state==1" color="#83AF92"></u-line>
               <div v-show="obj.state==1" style="width: 90%;margin-left: 5%;">
                <div style="height: 10px"></div>
                <div>巡检方式:二维码/NFC</div>
                <div style="height: 10px"></div>
                <div>提交时间:2024.04.12 15:30</div>
               </div>
                <div v-show="obj.state==1" style="height: 10px"></div>
            <u-line color="#83AF92"></u-line>
            <div style="height: 10px"></div>
            <div style="margin-left: 5%;">
                任务状态:{{ obj.state==1?'未接单':'已完成' }}
            </div>
            <div style="height: 10px"></div>
          </div>
          <div style="height: 30rpx"></div>
          <!-- <div class="status" v-show="obj.state==1" @click="cancel">删除任务</div> -->
        </view>
      </view>
    </div>
  </template>
  <script>
  export default {
    data() {
      return {
        obj:{
            order_sn:'WM230139341421',
            date:'2024.04.12 10:30',
            type:1,
            types:'维修',
            name:'###',
            bh:'######',
            bm:'######',
            jj:'######',
            gz:'######',
            zd:'#######',
            status:'######',
            ms:'#######',
            state:1
        },
        indent:'',
       
      };
    },
    methods: {
        // 取消任务
                cancel(){
            uni.showModal({
                title: '删除任务',
                content: '确认要删除当前任务吗',
                showCancel: true,
                success: ({ confirm, cancel }) => {
                    if(confirm){
                        uni.showToast({
                            title: '删除成功',
                            icon: 'success',
                            mask: true
                        })
                    }else{
                        uni.showToast({
                            title: '取消',
                            icon: 'none',
                            mask: true
                        })  
                    }
                }
            })
        },
        // 导航
        addressTo(){
            uni.getLocation({
					type: 'gcj02', //返回可以用于uni.openLocation的经纬度
					success: function (res) {
						uni.openLocation({
							latitude: 121.455244,
							longitude: 31.231876,
							name:'###收运处',
							success: function () {
								console.log('success');
							}
						});
					}
				});
        }
    },
    onLoad() {},
    onShow(){
      this.indent = uni.getStorageSync('pageIndent');
      if(this.indent=='巡检'){
        uni.setNavigationBarTitle({
		    title: '巡检详情'
	    });
      }else{
        uni.setNavigationBarTitle({
		    title: '维保详情'
	      });
      }
    }
  };
  </script>
  <style lang="scss">
  .container {
    height: 100vh;
    width: 100vw;
    background: #e3ede2;
    color: #1a512c;
    overflow-y: scroll;
  }
  .head-nav {
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .activite {
    border-bottom: 2px solid #1a512c;
  }
  .card {
    width: 95%;
    margin-left: 2.5%;
    margin-top: 10px;
    border-radius: 10px;
    background: #b9e2c7;
    font-size: 14px;
    .card-top {
    //   font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 90%;
      margin-left: 5%;
    }
  }
  .items {
    display: flex;
    align-items: center;
    width: 90%;
    margin-left: 5%;
    justify-content: space-between;
    font-size: 14px;
  }
  .table {
    width: 90%;
    margin-left: 5%;
  }
  .status {
    color: #fff;
    background: #EE5555;
    width: 95%;
    margin-left: 2.5%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    border-radius: 5px;
  }
  .right{
  background: #FDBD18;
  color: #fff;
  
  }
  .right1{
  background: #50AB18;
  color: #fff;
  }
  .pic{
    width: 100px;
    height: 100px;
    border: 1px solid red;
  }
  </style>
  